.vl-center {
  width: calc(100% - 1530px);
  height: 100%;
  position: relative;

  .vlc-top-realtime-data {
    margin-top: 110px;
    padding: 0 276px;

    .dynamic-data-item {
      width: 340px;
      height: 170px;
      background: linear-gradient(to bottom, #2190f78a, #2190f700);
      ;
      border-top: 4px solid #218FF7;
      display: flex;
      flex-direction: column;
      justify-items: center;
      justify-content: center;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;
      .ddi-title{
        font-size: 32px;
      }
      .ddi-value{
        display: flex;
        font-size: 45px;
        display: inline-block;
        font-family: neirong;
        .ddi-unit{
          font-size: 25px;
          color: #3FD0FF;
          transform: translateY(22px);
        }
      }
    }
  }

  .map-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -43%) scale(1);
    .map-bg-color {
      fill: rgba(255, 255, 255, 0);
      &:hover{
        fill: rgb(0, 255, 255);
      }
    }
    .image-3D {
      width: 100%;
      height: 100%;
    }
    .image-svg-g{
      path {
        opacity: 0;
        &:hover{
          opacity: 0.5;
        }
      }
    }
  }
}

@keyframes rotateAnimation {
  0% {
    transform: translate3d(4px, 48px, 0) scale3d(0.8, 0.6, 1); /* 从0度开始旋转 */
  }
  50% {
    transform: translate3d(4px, 48px, 0) scale3d(0.9, 0.65, 1); /* 旋转一周，360度 */
  }
  0% {
    transform: translate3d(4px, 48px, 0) scale3d(0.8, 0.6, 1); /* 从0度开始旋转 */
  }
}